<template>
  <div class="button-demo">
    <h2>按钮案例展示</h2>
    <div class="demo-section">
      <h3>基础按钮</h3>
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>
    </div>

    <div class="demo-section">
      <h3>图标按钮</h3>
      <el-row>
        <el-button type="primary" :icon="Plus">添加</el-button>
        <el-button type="success" :icon="Edit">编辑</el-button>
        <el-button type="danger" :icon="Delete">删除</el-button>
        <el-button type="warning" :icon="Search">搜索</el-button>
      </el-row>
    </div>

    <div class="demo-section">
      <h3>按钮尺寸</h3>
      <el-row>
        <el-button size="large">大型按钮</el-button>
        <el-button>默认按钮</el-button>
        <el-button size="small">小型按钮</el-button>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Plus, Edit, Delete, Search } from '@element-plus/icons-vue'
</script>

<style scoped>
.button-demo {
  padding: 20px;
}

.demo-section {
  margin-bottom: 30px;
}

.demo-section h3 {
  margin-bottom: 15px;
  color: #333;
}

.el-row {
  margin-bottom: 20px;
}

.el-row .el-button {
  margin-right: 10px;
}
</style>